<!-- 生产分析 -->
<template>
  <div class="product-analysis">
    <!-- <line-logo :name="$i18n.t('planOrderMerge.openRatio')" /> -->
    <div class="flex-row">
      <!-- 1 -->
      <div class="flex-box w-per-25 bgc-EFF8FD py-35">
        <div class="echart-pack">
          <div class="liquid-chart-box border-64B5EA mr-30">
            <liquid-chart
              :rate="analysisData.openRatio || 0"
              fontWeight="bold"
              waterPoloColor="#64B5EA"
              textColor="#0F4161"
              ref="startWorkLiquid"
            />
          </div>

          <div class="text-center">
            {{ $i18n.t("planOrderMerge.openRatio") }}
            <el-popover
              class="item"
              effect="dark"
              width="250"
              trigger="hover"
              placement="top-start"
            >
              <!-- <dev class="query_icon ml-8">?</dev> -->
              <div>
                <p>{{ $i18n.t("planOrderMerge.msg1-1") }}</p>
                <p>{{ $i18n.t("planOrderMerge.msg1-2") }}</p>
                <p>{{ $i18n.t("planOrderMerge.msg1-3") }}</p>
              </div>
              <div slot="reference" class="query_icon ml-8">?</div>
            </el-popover>
          </div>
        </div>
        <div class="flex-col h-140 w-50">
          <order-base-item
            width="auto"
            :title="$i18n.t('planOrderMerge.planToStart')"
            :value="analysisData.planOpenNum || 0"
            type="bold"
          />
          <order-base-item
            width="auto"
            :title="$i18n.t('planOrderMerge.actualWork')"
            :value="analysisData.actualOpenNum || 0"
            type="bold"
          />
          <order-base-item
            width="auto"
            :title="$i18n.t('planOrderMerge.difference')"
            :value="analysisData.openLackNum || 0"
            type="bold"
          />
        </div>
      </div>
      <!-- 2 -->
      <div class="flex-box w-per-25 bgc-E5F9F6 py-35">
        <div class="echart-pack">
          <div class="liquid-chart-box border-00BFA5 mr-30">
            <liquid-chart
              :rate="analysisData.endRatio || 0"
              fontWeight="bold"
              waterPoloColor="#00BFA5"
              textColor="#004D42"
              ref="completeWorkLiquid"
            />
          </div>
          <div class="text-center">
            {{ $i18n.t("planOrderMerge.timeToComplete") }}
            <el-popover
              class="item"
              effect="dark"
              width="250"
              trigger="hover"
              placement="top-start"
            >
              <!-- <dev class="query_icon ml-8">?</dev> -->
              <div>
                <p>{{ $i18n.t("planOrderMerge.msg2-1") }}</p>
                <p>{{ $i18n.t("planOrderMerge.msg2-2") }}</p>
                <p>{{ $i18n.t("planOrderMerge.msg2-3") }}</p>
              </div>
              <div slot="reference" class="query_icon ml-8">?</div>
            </el-popover>
          </div>
        </div>
        <div class="flex-col h-140 w-50">
          <order-base-item
            width="auto"
            :title="$i18n.t('planOrderMerge.plan')"
            :value="analysisData.planEndNum || 0"
            type="bold"
          />
          <order-base-item
            width="auto"
            :title="$i18n.t('planOrderMerge.actualCompletion')"
            :value="analysisData.actualEndNum || 0"
            type="bold"
          />
          <order-base-item
            width="auto"
            :title="$i18n.t('planOrderMerge.difference')"
            :value="analysisData.endLackNum || 0"
            type="bold"
          />
        </div>
      </div>
      <!-- 3 -->
      <div class="flex-box w-per-25 bgc-FEF8ED py-35">
        <div class="echart-pack">
          <div class="liquid-chart-box border-F4BB5B mr-30">
            <liquid-chart
              :rate="analysisData.lackQtyRatio || 0"
              fontWeight="bold"
              waterPoloColor="#F4BB5B"
              textColor="#634410"
              ref="productWorkLiquid"
            />
          </div>
          <div class="text-center">
            {{ $i18n.t("planOrderMerge.abnormalRate") }}
            <el-popover
              width="250"
              trigger="hover"
              class="item"
              effect="dark"
              placement="top-start"
            >
              <!-- <dev class="query_icon ml-8">?</dev> -->

              <div>
                <p>{{ $i18n.t("planOrderMerge.msg3-1") }}</p>
                <p>{{ $i18n.t("planOrderMerge.msg3-2") }}</p>
                <p>{{ $i18n.t("planOrderMerge.msg3-3") }}</p>
              </div>
              <div slot="reference" class="query_icon ml-8">?</div>
            </el-popover>
          </div>
        </div>
        <div class="flex-col h-140 w-50">
          <order-base-item
            width="auto"
            :title="$i18n.t('planOrderMerge.abnormalQuantity')"
            :value="analysisData.quantity || 0"
            type="bold"
          />
          <order-base-item
            width="auto"
            :title="$i18n.t('planOrderMerge.hasClosedQuantity')"
            :value="analysisData.qualifiedQty || 0"
            type="bold"
          />
          <order-base-item
            width="auto"
            :title="$i18n.t('planOrderMerge.difference')"
            :value="analysisData.lackQty || 0"
            type="bold"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LiquidChart from "./liquid-chart-analysis.vue";
import OrderBaseItem from "./order-base-item-analysis.vue";
import LineLogo from "./line-logo-analysis.vue";
export default {
  name: "",
  components: { LiquidChart, OrderBaseItem, LineLogo },
  props: {
    analysisData: {
      type: Object,
      default: {
        planOpenNum: 0,
        actualOpenNum: 0,
        openLackNum: 0,
        openRatio: 0,
        planEndNum: 0,
        actualEndNum: 0,
        endLackNum: 0,
        endRatio: 0,
        lackQty: 0,
        lackQtyRatio: 0,
      },
    },
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.startWorkLiquid.init();
      this.$refs.completeWorkLiquid.init();
      this.$refs.productWorkLiquid.init();
      this.$refs.dispatchWorkLiquid.init();
    });
  },
};
</script>
<style scoped lang="scss">
.product-analysis {
  padding: 12px 10px 15px;
  background: #fff;

  .echart-pack {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .liquid-chart-box {
    width: 90px;
    height: 90px;
    padding: 8px;
    background: #ffffff;
    border-radius: 50%;
  }

  .border-64B5EA {
    border: 1px solid #64b5ea;
  }

  .border-00BFA5 {
    border: 1px solid #00bfa5;
  }

  .border-F4BB5B {
    border: 1px solid #f4bb5b;
  }

  .border-F26A60 {
    border: 1px solid #f26a60;
  }

  .w-per-25 {
    width: calc(33% - 10px);
  }

  .bgc-EFF8FD {
    background-color: #eff8fd;
  }

  .bgc-E5F9F6 {
    background-color: #e5f9f6;
  }

  .bgc-FEF8ED {
    background-color: #fef8ed;
  }

  .bgc-FEF0EF {
    background-color: #fef0ef;
  }

  .py-35 {
    padding: 10px 0;
  }

  .flex-box {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .flex-col {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .flex-row {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }

  .h-140 {
    height: 90px;
  }

  .mr-30 {
    margin-right: 00px;
  }
  .w-50 {
    width: 50%;
  }
  .text-center {
    // width: 140px;
    // text-align: center;
    font-weight: 600;
    font-size: 14px;
    margin-top: 15px;
  }
  .query_icon {
    width: 16px;
    height: 16px;
    background: #93b0cb;
    opacity: 1;
    font-size: 12px;
    color: #ffffff;
    text-align: center;
    line-height: 16px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
  }
}
</style>
